<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/layui/css/layui.css"/>
    <title>Title</title>
    <style>
        .layui-form-pane .layui-form-label {
            width: 16em;
        }

    </style>
</head>
<body>
<div>
    <div class="layui-row">
        <div class="layui-col-sm8 layui-col-sm-offset2">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <!--                    <li class="layui-this">物联控制</li>-->
                    <li>设备管理</li>
                </ul>
                <div class="layui-tab-content">
                    <!--                    <div class="layui-tab-item layui-show">-->
                    <!--                        11-->
                    <!--                    </div>-->
                    <div class="layui-tab-item layui-show">
                        <div>
                            <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius"
                                    onclick="showStepInfo()" id="joinBtn"><i
                                    class="layui-icon  layui-icon-addition"
                                    style="font-size: 30px; color: #1E9FFF;"></i> 设备入网
                            </button>
                            <div style="float: right;width: 500px;height:36px;color:#000;text-align: right;line-height: 36px;overflow:hidden;display:flex;"
                            >
                                <div id="gatewayInfo" style="flex:1;"></div>
                                <a style="cursor:pointer;margin-left:20px;color:blue;text-decoration:underline;" onclick="setWhiteIp()">设置网关白名单</a>
                            </div>
                        </div>
                        <div>
                            <table id="subdev" lay-filter="subdev"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/sha.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/html" id="barAction">
    <a class="layui-btn layui-btn-xs" lay-event="leave">删除</a>
</script>
<script>
    loadGetWayInfo()
    setInterval(function () {
        loadGetWayInfo()
    }, 5000)

    function loadGetWayInfo() {
        httpGet('iot/gateway/info/load', function (res) {
            if (res.code === 0) {
                $("#gatewayInfo").css('color', '#000');
                $("#gatewayInfo").html("<span>网关状态：" + res.data.ip + "(" + (res.data.on ? '在线' : '离线') + ")</span>  <a style='margin-left: 8px;color:blue;cursor:pointer;' onclick='showAcountEdit(\"" + res.data.ip + "\")'>修改网关密码</a>")
                if (res.data.on) {
                    $("#joinBtn").removeAttr("disabled")
                } else {
                    $("#joinBtn").attr("disabled", "disabled")
                }
            } else {
                $("#gatewayInfo").css('color', 'red');
                $("#gatewayInfo").html(res.msg)
                $("#joinBtn").attr("disabled", "disabled")
            }
        })
    }

    layui.use(['element', 'table', 'layer'], function () {
        var element = layui.element;
        var table = layui.table;
        //第一个实例
        table.render({
            id: '#subdev',
            elem: '#subdev'
            , height: 500
            , url: `/iot/zigbee/device/list` //数据接口
            ,method:"POST"
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'tags', title: '设备名称', align: 'center'}
                , {field: 'type_str', title: '设备类型', sort: true, align: 'center'}
                , {field: 'dev_key', title: '设备地址位', align: 'center'}
                , {field: 'mac', title: '设备MAC地址', align: 'center'}
                , {field: 'update_time', title: '更新时间', align: 'center'}
                , {fixed: 'right', title: '操作', toolbar: '#barAction', width: 220, align: 'center'}
            ]],
            done: function (res, curr, count) {
                if (res.code <= -99) {
                    top.window.location.href = "/index.html";
                }
            }
        });
        table.on('tool(subdev)', function (obj) {
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'leave') { //查看
                //do somehing
                var data = obj.data;
                console.log(data)
                layer.open({
                    type: 2,
                    title: "删除设备",
                    content: './leaveGateway.html?mac=' + data.mac,
                    area: ['400px', '140px']
                });
            }
        })
    });


    function reloadTable() {
        layui.use(['element', 'table'], function () {
            var table = layui.table
            table.reload('#subdev')
        });
    }


    function showStepInfo() {
        layui.use(['layer'], function () {
            var layer = layui.layer
            layer.open({
                type: 2,
                title: "设备入网",
                content: './joinstep.html',
                area: ['800px', '600px']
            });
        });
    }


    function showAcountEdit(ip) {
        layui.use(['layer'], function () {
            var layer = layui.layer
            layer.open({
                type: 2,
                title: "修改Zigbee网关密码",
                content: './editzigbeeaccount.html?ip=' + encodeURIComponent(ip),
                area: ['400px', '300px']
            });
        });
    }

    function setWhiteIp() {
        layui.use(['layer'], function () {
            var layer = layui.layer
            layer.prompt({
  formType: 0,
  value: '',
  title: '设置网关IP地址白名单',
}, function(value, index, elem){
  if(/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/.test(value)){
   layer.close(index);
   saveWhiteIP(value)
  }else{
     layer.msg('您输入的IP地址格式不正确', {icon: 5});
  }

});
        });
    }


 function saveWhiteIP(ip){
        httpPost('iot/gateway/white/ip/config', {ip:ip},function (res) {
            if (res.code === 0) {
                layer.msg('配置成功', {icon: 6});
            } else {

            }
        })
    }

</script>
</body>
</html>